//jquery选择器，选中指定元素，绑定实现，执行代码逻辑
$(".btn-list").on("click", function () {
  $("#music-list-dialog").animate({ top: "10rem" }, 100);
});

//点击关闭按钮折叠列表框（课堂练习）
$("#btn-close").click(function () {
  $("#music-list-dialog").animate({ top: "100%" }, 100);
});

/*************************/
//动态创建音频对象，音乐资源的播放通过该对象实现（并且将其包装为jquery对象）
const player = $("<audio>")
//歌曲api接口地址
const baseURL = "http://home.softeem.xin:8088/music/listAll"
//声明空数组缓存从服务端读取的歌曲数据
let musics = []
//初始化当前正在播放的歌曲索引
let currentIndex = 0
//初始化播放器当前播放进度和总进度（秒）
let now = 0
let total = 0
//标记当前播放器的播放状态 true-播放中  false-未播放
let playing = false

//前端如何请求服务端数据，有哪些方式？
// 异步请求-ajax（XmlHttpRequest实现与服务端交互）
// websocket-全双工通信（弹幕，直播推流）
//异步
$.get(baseURL, function (data) {
  //缓存数据到变量中
  musics = data
  //循环遍历歌曲列表
  $.each(musics, (i, m) => {
    $("#music-list").append(`<li data-index="${i}">${m.name}</li>`);
  })
  //为播放器初始化播放源(解决页面初次加载未从列表选择歌曲项播放时，点击播放按钮实现播放源初始化)
  player.prop('src',musics[currentIndex].path)
})

//html5 新增一个全局属性  data-[key]=[value]
//针对动态生成的元素无法直接通过选择器选中,通常需要先选中存在的父元素，再通过父元素将事件传递子元素上
//为列表中每一个列表项绑定点击事件，实现歌曲播放
//事件委派（委托）
$("#music-list").on("click", "li", function () {
  //索引变更前，当前索引指向上一首歌曲,还原上一首歌曲的高亮
  $(`li:eq(${currentIndex})`).removeClass("active");
  //获取当前被点击的列表项索引值（歌曲索引）
  currentIndex = $(this).data("index");
  //获取需要被播放的歌曲对象
  let m = musics[currentIndex];
  //为播放器对象设置播放源
  player.prop("src", m.path);
  //主动触发播放事件
  // player.trigger('play') //player[0].play()
  startPlay();
});

//开始播放
function startPlay() {
  //使用定时器，定时监听播放器准备状态
  let flag = setInterval(function () {
    let state = player.prop("readyState");
    if (state === 4) {
      //执行播放
      player.trigger("play");
      //标记播放器处于播放状态
      playing = true
      //清理定时器
      clearInterval(flag);
    }
  }, 50);
  //1.同步显示歌曲名称
  $(".music-name").text(musics[currentIndex].name);
  //2.实现唱片旋转
  $(".disc").addClass("playing");
  //3.切换播放按钮为暂停图标
  $(".btn-play-pause>i").removeClass("fa-play").addClass("fa-pause");
  //4.歌曲列表高亮显（背景或歌曲名）示正在播放歌曲（考虑如何清除上一首歌曲的高亮）
  $(`li:eq(${currentIndex})`).addClass("active");
  //5.同步显示唱片封面和背景毛玻璃
  $(".blur-img,.ablum-img").prop("src", musics[currentIndex].ablumImg);
}

//扩展
//1. 同步显示歌曲的当前播放时长和总时长
//2. 进度条实时同步显示
player.on('loadeddata', function () {
  //获取歌曲的播放总进度
  total = this.duration;
  //将总时长在指定位置显示
  $('.time-total').text(fmtTime(total))
});

//监听currentTime的实时变化
player.on('timeupdate',function(){
    //获取当前播放器的播放进度
    now = this.currentTime
    //实时显示当前时间到指定位置
    $('.time-now').text(fmtTime(now))
    //思考：如何实现进度条实时改变
    let progress = now / total * 100  + '%'
    //设置进度条的宽度为实时歌曲进度
    $('.progress').css('width',progress)
})

//时间格式化通用函数，将以秒为单位的时间格式化为：mm:ss
function fmtTime(t) {
  //根据提供的时间构建一个日期对象 
  t = new Date(t * 1000);
  //获取当前日期所表示的分钟数
  let m = t.getMinutes();
  let s = t.getSeconds();
  //mm:ss
  m = m < 10 ? '0' + m : m;
  s = s < 10 ? '0' + s : s;
  return `${m}:${s}`;
}

//为进度条绑定点击事件，控制歌曲播放进度变化
$('.box-progress').on('click',function(e){
    //当前容器总宽度
    let w = $(this).width()
    //获取点击位置和左侧的距离
    let x = e.offsetX
    //获取点击位置的实时进度
    now = x / w * total
    //设置播放器的当前位置为指定值
    player.prop('currentTime',now)
})

$('.btn-play-pause').on('click',function(){
    if(playing){
        //暂停
        player.trigger('pause')
        //停止唱片旋转
        $(".disc").removeClass("playing");        
        //将图标切换为播放图标
        $(".btn-play-pause>i").removeClass("fa-pause").addClass("fa-play");
        //将播放状态标记为false(暂停)
        playing = false
    }else{
        //继续播放
        startPlay()
    } 
})

//任务
//1. 按钮控制循环状态变化（loop:0-列表/1-随机/2-单曲）
//2. 点击上一曲/下一曲按钮，结合循环方式切歌
//3. 歌曲播放完毕之后自动切歌（参考audio-api  ended事件）